<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="../js/vue.js"></script>
		<style>
		ul li{
			display: block;
			float: left;
			margin-left:30px;
			height:30px;
		}
		.active{
			color:orange;
			border-bottom:2px solid #000080;
		}
		</style>
	</head>
	<body>
		<div id="app">
		  <ul>
		  	<li @click="getActive('a1')" :class="isActive.a1?'active':''">首页</li>
		  	<li @click="getActive('a2')" :class="isActive.a2?'active':''">新闻</li>
		  	<li @click="getActive('a3')" :class="isActive.a3?'active':''">个人中心</li>
		  	<li @click="getActive('a4')" :class="isActive.a4?'active':''">关于我们</li>
		  </ul>
		</div>
		
		<script>
		Vue.config.productionTip = false
		var vm = new Vue({
		  el: '#app',
		  data: {
		    isActive:{
				a1:true,
				a2:false,
				a3:false,
				a4:false,
			}
		  },
		  methods:{
			  getActive(id){
				  for(i in this.isActive){
					  this.isActive[i] = false
				  }
				  this.isActive[id] = true
			  }
		  },
		})
		</script>
	</body>
</html>
